<style>
<!--
.faqMainPanel h3 {
	DISPLAY: block;
	FONT-SIZE: 18px;
	PADDING-BOTTOM: 4px;
	COLOR: #FFFFFF;
	BORDER-BOTTOM: #C9E0E8 1px solid;
	border-bottom: 1px solid #C9E0E8;
}

.faqMainPanel ul {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 30px;
	PADDING-BOTTOM: 20px;
	PADDING-TOP: 20px;
}

.faqMainPanel ul li[type=circle] {
	list-style-type: circle;
}

.faqMainPanel .faqAnswer {
	BORDER-RIGHT: #D0E2EC 1px solid;
	PADDING-RIGHT: 10px;
	BORDER-TOP: #D0E2EC 1px solid;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 10px;
	MARGIN: 10px 30px;
	BORDER-LEFT: #D0E2EC 1px solid;
	COLOR: #333;
	PADDING-TOP: 10px;
	BORDER-BOTTOM: #D0E2EC 1px solid;
	border-right: 1px solid #D0E2EC;
	border-top: 1px solid #D0E2EC;
	margin: 10px 30px;
	border-left: 1px solid #D0E2EC;
	border-bottom: 1px solid #D0E2EC;
}

.faqMainPanel .faqAnswer h3{
	DISPLAY: block;
	FONT-SIZE: 18px;
	PADDING-BOTTOM: 4px;
	COLOR: #FFFFFF;
	BORDER-BOTTOM: #000000 0px solid;
	border-bottom: 0px solid #000000;
}
-->
</style>
<script type="text/javascript">
<!--
function toggleFAQ(argID)
{
	$('#'+argID+'_faq').toggle();
}
//-->
</script>
<div id="page-title">
		<img
		src="<{$APPLICATION_URL}>/Themes/Default/Images/res-img/faq.png"
		width="50" height="50" class="left-align service-icn "
		alt="<{$categoryItem->name}>">
	<h1 class="page-heading"><{$categoryItem->name}></h1>
</div>
<div id="breadcrumb" class="transparent">
	<p>
		<img src="<{$APPLICATION_URL}>/Themes/Default/Images/res-img/home.png" class="home" alt="Slappit.com"> <a href="<{$APPLICATION_URL}>/Browse/index" title="Slappit.com Homepage">Home</a> / <a href="<{$APPLICATION_URL}>/Browse/MyAccount/index" title="Slappit.com User Panel">Website Admin Panel</a> / <a href="<{$APPLICATION_URL}>/Browse/Faq/index" title="Frequently Asked Questions">Frequently Asked Questions</a> / <a href="#"><{$categoryItem->name}></a>

</div>
<div id="main-content">
	<article id="main-article">
	<div class="faqMainPanel">
		<ul>
			<h3>
				<{$categoryItem->name}> <a
					href="<{$APPLICATION_URL}>/Browse/Faq/list/catId/<{$topCatEntity->id}>"></a>
			</h3>
			<ul>
				<{foreach item=questionItem from=$itemList}>
				<li type="circle">
					<a onclick="toggleFAQ('<{$questionItem->id}>_id') " href="javascript:void(0);" ><{$questionItem->question}></a>
					<div id="<{$questionItem->id}>_id_faq" class="faqAnswer" style="display:none;"><{$questionItem->answer}></div>
				</li> 
				<{/foreach}>
			</ul>
			<br>
		</ul>
	</div>

	</article>
</div>

<div class="space transparent"><a href="#top" id="scroll-top"><img src="<{$APPLICATION_URL}>/Themes/Default/Images/res-img/top.png" alt="Back to the top"></a></div>